 <div class="pack-overview-background"></div>
 <div class="pack-overview">
    <div class="pack-info">
      <% if (package.deprecated) { %>
        <div class="pack-name deprecated"><%= package.name %></div>
        <% if (package.description) {%>
          <p class="pack-description deprecated"><%= package.description %></p>
        <% } %>
        <div class="deprecated-content" title="<%= package.deprecated %>"><%= package.deprecated %></div>
      <% } else { %>
        <div class="pack-name"><%= package.name %></div>
        <% if (package.description) {%>
          <div class="pack-description" title="<%= package.description %>"><%= package.description %></div>
        <% } %>
      <% } %>
      <div class="pack-ver">
        <img title="<%= package.version %>" src="/badge/v/<%= package.name %>.svg?version=<%= package.version %>">
        <img src="/badge/d/<%= package.name %>.svg">
        <% if (package.engines) { %>
          <% for (var k in package.engines) {
            var engine = package.engines[k];
          %>
            <% if (engine.badgeURL) { %>
            <img title="<%= engine.title %>" src="<%- engine.badgeURL %>">
            <% } %>
        <% }
        } %>
        <% if (package.snyk) { %>
        <a class="badge-link" href="<%= package.snyk.url %>" target="_blank"><img title="Known Vulnerabilities" src="<%- package.snyk.badge %>"></a>
        <% } %>

        <% if (package.packagephobia) { %>
        <a class="badge-link" href="<%= package.packagephobia.url %>" target="_blank"><img title="Install Size" src="<%- package.packagephobia.badge %>"></a>
        <% } %>
      </div>
      <div class="pack-repo">
        <% if (package.fromNow) { %>
          <div class="pack-lastup">
            Last updated <%= package.fromNow %>
            <% if (package.lastPublishedUser) {
              var name = package.lastPublishedUser.name;
            %>
              by <a href="/~<%= name %>"><%= name %></a>
            <% } %>
            .
            </div>
        <% } %>

        <% if (package.license && package.license.url) { %>
          <a href="<%= package.license.url %>" target="_blank"><%= package.license.name %></a>
        <% } %>

        <% if (package.repository) { %>
          <% if (package.license) {%> &middot; <% } %>
          <a href="<%= package.repository.weburl %>" target="_blank">Repository</a>
        <% } %>

        <% if (package.bugs && package.bugs.url) { %>
          <% if (package.license || package.repository) {%> &middot; <% } %>
          <a href="<%= package.bugs.url %>" target="_blank">Bugs</a>
        <% } %>

        <% if (package.license || package.repository || (package.bugs && package.bugs.url)) {%> &middot; <% } %>

        <% if (!package.isPrivate) { %>
        <a href="https://www.npmjs.org/package/<%= package.name %>/v/<%= package.version %>" target="_blank">Original npm</a>
        <% } %>

        <% if (package.dist.tarball) { %>
          &middot;
          <a href="<%= package.dist.tarball %>" target="_blank">Tarball</a>
        <% } %>

        <% if (package.registryPackageUrl) { %>
          &middot;
          <a href="<%= package.registryPackageUrl %>" target="_blank">package.json</a>
        <% } %>
      </div>
      <div class="pack-install">
        <pre class="sh">$ <%- config.npmClientName %> install <%= package.name %> <% if (package.preferGlobal) { %>-g<% } %></pre>
        <div class="pack-sync">
          <% if (package.isPrivate) { %>
            Private package
          <% } else { %>
            <a href="/sync/<%= package.name %>" target="_blank">SYNC</a> missed versions from
              <a href="<%= package.registryUrl %>" target="_blank">official npm registry</a>.
          <% } %>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">


  <div class="pack-readme col-17">
    <section id="readme" class="markdown-body">
      <%- package.readme || 'No README was found.' %>

      <h2>Current Tags</h2>
      <ul>
        <% for (const item of package.tags) { %>
        <li>
          <a href="/package/<%- package.name %>/v/<%= item.version %>">
            <%= item.version %>
          </a>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          ...
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span><%= item.tag %></span>
          <% if (item.fromNow) { %>(<span><%= item.fromNow %></span>)<% } %>
        </li>
        <% } %>
      </ul>

      <h2><%= package.versions.length %> Versions</h2>
      <ul>
        <% for (const item of package.versions) { %>
        <li>
          <a href="/package/<%- package.name %>/v/<%= item.version %>"
            <% if (item.deprecated) { %> style="color:red" title="<%= item.deprecated %>" <% } %>
          >
            <%= item.version %>
          </a>
          <% if (item.deprecated) { %>
          [deprecated]
          <% } else { %>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <% } %>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          ...
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span><%= item.fromNow %></span>
        </li>
        <% } %>
      </ul>
    </section>
  </div>

  <div class="pack-details cols-box col-6 col-push-1">

    <div class="pack-maintainers cols-box-item">
      <div class="cols-box-title">
        <%
          var maintainers = package.maintainers || [];
          var l = maintainers.length
        %>
        Maintainers <%= l > 0 ? ' (' + l + ')' : '' %>
      </div>
      <div class="maintainers">
        <% for (var i = 0; i < maintainers.length; i ++) { %>
          <div class="maintainer">
            <a class="username" href="/~<%= maintainers[i].name %>">
              <img src="<%= maintainers[i].gravatar %>" class="avatar">
              <%= maintainers[i].name %>
            </a>
          </div>
        <% } %>
      </div>
    </div>

    <% if (download) { %>
    <div class="pack-downloads cols-box-item">
      <div class="cols-box-title">
        Downloads
      </div>
      <div class="downloads">
        <div class="row">
          Total
          <span class="pack-download-num"><%= download.total %></span>
        </div>
        <div class="row">
          Today
          <span class="pack-download-num"><%= download.today %></span>
        </div>
        <div class="row">
          This Week
          <span class="pack-download-num"><%= download.thisweek %></span>
        </div>
        <div class="row">
          This Month
          <span class="pack-download-num"><%= download.thismonth %></span>
        </div>
        <div class="row">
          Last Day
          <span class="pack-download-num"><%= download.lastday %></span>
        </div>
        <div class="row">
          Last Week
          <span class="pack-download-num"><%= download.lastweek %></span>
        </div>
        <div class="row">
          Last Month
          <span class="pack-download-num"><%= download.lastmonth %></span>
        </div>
      </div>
    </div>
    <% } %>

    <div class="pack-dep cols-box-item">
      <div class="cols-box-title">
        <%
          var deps = Object.keys(package.dependencies || {});
          var l = deps.length;
        %>
        Dependencies<%= ' (' + l + ')' %>

      </div>
      <% if (l) { %>
        <ul>
        <%
          deps.forEach(function(pkg, i) {
        %>
        <li>
          <a class="pack-dep-name" target="_blank" href="/package/<%= pkg %>"><%= pkg %></a>
           <span class="pack-dep-ver"><%= package.dependencies[pkg]%></span>
        </li>
        <% }); %>
      </ul>
      <% } else { %>
        None
      <% } %>
    </div>
    <div class="pack-dep cols-box-item">
      <div class="cols-box-title">
        <%
          var deps = Object.keys(package.devDependencies || {});
          var l = deps.length;
        %>
        Dev Dependencies<%= ' (' + l + ')' %>

      </div>
      <% if (l) { %>
        <ul>
        <%
          deps.forEach(function(pkg, i) {
        %>
        <li>
          <a class="pack-dep-name" target="_blank" href="/package/<%= pkg %>"><%= pkg %></a>
           <span class="pack-dep-ver"><%= package.devDependencies[pkg]%></span>
        </li>
        <% }); %>
      </ul>
      <% } else { %>
        None
      <% } %>
    </div>

    <% if (package.dependents) { %>
    <div class="pack-dep cols-box-item">
      <div class="cols-box-title">
        <%
          var deps = package.dependents;
          var l = deps.length;
        %>
        Dependents<%= ' (' + l + ')' %>

      </div>
      <% if (l) { %>
        <ul>
        <%
          deps.forEach(function(pkg) {
        %>
        <li>
          <a class="pack-dep-name" target="_blank" href="/package/<%= pkg %>"><%= pkg %></a>
        </li>
        <% }); %>
      </ul>
      <% } else { %>
        None
      <% } %>
    </div>
    <% } %>

  </div>
</div>
